import React, { Component} from 'react';
import {Link} from 'react-router';
import Split from '../CommonComponent/Split'
import TabBar from '../../Component/CommonComponent/TabBar'
import RecordUnit from '../../Component/CommonComponent/RecordUnit'
import Top from '../CommonComponent/Top'
import '../../Stylesheets/wx/recharge.css'

export default class RechargeRecord extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            index:0,
            isShowNav:false
        };
    }

    tabChange(index){
        if(index == 5){
            this.setState({isShowNav:true})
        }
    }
    render(){
        const {isShowNav} = this.state
        return(
            <div className="containerNav">
                <Top
                    title ={'维魅力-余额列表'}
                />
                <TabBar
                    index = {this.state.index}
                    onClick = {index=>this.tabChange(index)}
                    contents={['全部','下单','汇总','充值','扣款','更多']}
                />
                <Split />
                <Link to="/rechargeDetail">
                    <RecordUnit
                        imgPath = {require('../../Images/headerImg.jpg')}
                        orderNo = {'LB54545445'}
                        numDetail = {'-1800'}
                        orderTime = {'2016-02-11 11:25:45'}
                        orderStutas = {'已发货'}
                    />
                </Link>
                {
                    isShowNav?
                        <div className="pa z-index100 bgk_lv color6 bgk_gray" style={{top:40,right:0}}>
                            <div
                                style={{width:100,height:30,lineHeight:'30px',paddingLeft:10}}
                                onClick={()=>this.setState({isShowNav:false})}
                            >
                                取消订单
                            </div>
                            <div
                                style={{width:100,height:30,lineHeight:'30px',paddingLeft:10}}
                                onClick={()=>this.setState({isShowNav:false})}
                            >
                                取消汇总
                            </div>
                        </div>
                        :
                        null
                }


            </div>
        )
    }

}